<template>
    <el-dialog title="邀请列表" :visible="is_invite_join_group_list_show" :before-close="handleClose">
        <el-table :data="data">
            <el-table-column label="邀请编号" prop="id"></el-table-column>
            <el-table-column label="项目名称" prop="projectName"></el-table-column>
            <el-table-column label="邀请加入平台" prop="groupName"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="joinGroup(scope.row.id)"><i class="el-icon-zoom-in text-blue"></i></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible.sync="is_department_show" append-to-body>
            <el-tree class="dialog-form" ref="join-group-invite-tree" :data="sys_department_tree" :props="props" show-checkbox check-strictly node-key="id"></el-tree>
            <div class="dialog-form-button">
                <el-button @click="refuseJoinGroup" type="danger">拒绝</el-button>
                <el-button @click="confirmJoinGroup" type="primary">确定</el-button>
            </div>
        </el-dialog>
    </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex';
import group from '@/api/group.js';

export default {
    name: 'invite-list',
    props: ['is_invite_join_group_list_show', 'data'],
    computed: {
        ...mapGetters('department1', ['sys_department_tree'])
    },
    data() {
        return {
            id: undefined,
            is_department_show: false,
            props: {
                children: 'children',
                label: 'text',
                value: 'id'
            }
        }
    },
    methods: {
        handleClose() {
            this.is_department_show = false;
            this.$emit('update:is_invite_join_group_list_show', false);
        },
        joinGroup(id) {
            this.id = id;
            this.is_department_show = true;
        },
        confirmJoinGroup() {
            let arr = this.$refs['join-group-invite-tree'].getCheckedKeys();
            if (arr.length === 0) {
                this.$message.error('请选择部门!');
                return false;
            }
            group.joinGroup({id: this.id, department: arr}).then(res => {
                this.$message({
                    type: 'success',
                    message: '加入成功!'
                });
                this.$store.dispatch('group/getInviteJoinGroupList');
                this.$store.dispatch('group/getJoinGroupList');
            }).catch(err => {
                this.$message.error(err);
            });
            this.handleClose();
            this.$refs['join-group-invite-tree'].setCheckedKeys([]);
            arr = null;
        },
        refuseJoinGroup() {
            group.refuseJoinGroup({id: this.id}).then(res => {
                this.$message({
                    type: 'success',
                    message: '拒绝成功!'
                });
                this.$store.dispatch('group/getInviteJoinGroupList');
            }).catch(err => {
                this.$message.error(err);
            });
            this.handleClose();
        }
    },
    mounted() {
        if(this.sys_department_tree === undefined) {
            this.$store.dispatch('department1/getSysDepartmentTree');
        }
    }
}
</script>

<style>
.dialog-form-button {
    margin-top: 20px;
    text-align: center;
}
</style>
